<template>
  <div class="content-box">
    <e-heading>分组</e-heading>
    <e-sliderbox
      :value="activeGroup"
      :list="groupList"
      :slides="8"
      @change="handleChange">
      <template slot-scope="scope">
        {{scope.groupName}}组
      </template>
    </e-sliderbox>
    <div class="group-teams">
      <GroupTeamShow
        :isPreview="false"
        :groupList="groupTeamList"
        :teamIndex="currentGroupIndex">
      </GroupTeamShow>
    </div>
    <div class="btn-group center">
      <el-button type="primary" @click="goBuild()">创建赛程</el-button>
    </div>
  </div>
</template>

<script>
import ESliderbox from '@e-ui/Sliderbox'
import GroupTeamShow from './components/GroupTeamShow'
import Api from 'api/race'
import {generateGroup} from 'utils'
export default {
  components: {
    ESliderbox,
    GroupTeamShow
  },
  computed: {
    currentGroupIndex () {
      return this.groupList.indexOf(this.activeGroup)
    }
  },
  created () {
    this.getGroup()
  },
  data () {
    return {
      groupLength: 0,
      groupList: [],
      groupTeamList: [],
      activeGroup: {}
    }
  },
  methods: {
    getGroup () {
      Api.getCupGroup({matchId: this.$route.query.id}).then((res) => {
        this.groupLength = res.data.groupCount
        this.groupTeamList = res.data.cupGroups
        this.groupList = generateGroup(this.groupLength)
        this.activeGroup = this.groupList[0]
      })
    },
    handleChange (val) {
      this.activeGroup = val
    },
    goBuild () {
      this.$router.push({
        path: '/race/detail/manage/generate',
        query: this.$route.query
      })
    }
  }
}
</script>

<style lang="scss">

.group-teams{
  padding: 20px;
  border:1px solid #f0f0f0;
  margin: 20px 0;
}
</style>
